<template>
  <div>
    <el-dialog
      title="修改权限"
      :visible.sync="dialogVisibleUpdate"
      width="500px"
      :append-to-body="true"
      @close="cancelUpdateDia"
      :close-on-click-modal="false"
    >
      <el-form
        :model="editRowInfo"
        :rules="rules"
        ref="refUpdateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item size="small" label="权限名字" prop="name">
          <el-input clearable v-model="editRowInfo.name"></el-input>
        </el-form-item>
        <el-form-item size="small" label="权限描述" prop="description">
          <el-input
            clearable
            type="textarea"
            :rows="2"
            v-model="editRowInfo.description"
            resize="none"
            :autosize="{ minRows: 2, maxRows: 5 }"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="权限图标选择">
          <el-select v-model="iconId" placeholder="请选择">
            <el-option
              v-for="item in iconList"
              :key="item.id"
              :label="item.icon"
              :value="item.id"
            >
              <span
                style="float: left; line-height: 15px; padding-top: 10px"
                :class="item.icon"
              ></span>
              <span
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 13px;
                  line-height: 15px;
                  padding-top: 8px;
                "
                >{{ item.icon }}</span
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="权限父ID选择">
          <!-- default-expand-all  是否默认展开所有节点 -->
          <el-tree
            :data="parentList"
            :props="defaultProps"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            check-strictly
            @check-change="handleNodeClick"
            :default-checked-keys="[parentCheckedId]"
          >
          </el-tree>
        </el-form-item>
        <el-form-item size="small" label="权限类型选择">
          <el-radio-group v-model="typeId" @change="changeRadioId">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
            <!-- <el-radio :label="3">导航菜单</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item size="small" label="权限排序" prop="sort">
          <el-input clearable v-model="editRowInfo.sort"></el-input>
        </el-form-item>
        <el-form-item size="small" label="权限URL" prop="url">
          <el-input clearable v-model="editRowInfo.url"></el-input>
        </el-form-item>
        <el-form-item size="small" label="授权标识" prop="value">
          <el-input
            clearable
            type="textarea"
            :rows="2"
            v-model="editRowInfo.value"
            resize="none"
            :autosize="{ minRows: 2, maxRows: 5 }"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelUpdateDia" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="submitUpdateForm"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updatePermission } from "@/api/api";
export default {
  name: "editPermission",
  props: ["editRowInfo", "parentList"],
  data() {
    return {
      dialogVisibleUpdate: false, //弹框是否显示
      // 选择的数据
      iconId: "",
      parentCheckedId: 0,
      typeId: 0,
      defaultProps: {
        children: "children",
        label: "name",
      },
      // icon图标数据
      iconList: [
        {
          id: "el-icon-location-information",
          icon: "el-icon-location-information",
        },
        {
          id: "el-icon-house",
          icon: "el-icon-house",
        },
        {
          id: "el-icon-office-building",
          icon: "el-icon-office-building",
        },
        {
          id: "el-icon-notebook-1",
          icon: "el-icon-notebook-1",
        },
        {
          id: "el-icon-document-add",
          icon: "el-icon-document-add",
        },
        {
          id: "el-icon-connection",
          icon: "el-icon-connection",
        },
        {
          id: "el-icon-s-tools",
          icon: "el-icon-s-tools",
        },
        {
          id: "el-icon-chat-line-square",
          icon: "el-icon-chat-line-square",
        },
        // {
        //   id: "el-icon-cpu",
        //   icon: "el-icon-cpu",
        // },
        {
          id: "el-icon-document",
          icon: "el-icon-document",
        },
        {
          id: "el-icon-delete",
          icon: "el-icon-delete",
        },
        {
          id: "el-icon-setting",
          icon: "el-icon-setting",
        },
        {
          id: "el-icon-user",
          icon: "el-icon-user",
        },
        {
          id: "el-icon-star-off",
          icon: "el-icon-star-off",
        },
        {
          id: "el-icon-warning-outline",
          icon: "el-icon-warning-outline",
        },
        {
          id: "el-icon-cpu",
          icon: "el-icon-cpu",
        },
        {
          id: "el-icon-circle-check",
          icon: "el-icon-circle-check",
        },
        {
          id: "el-icon-help",
          icon: "el-icon-help",
        },
        {
          id: "el-icon-camera",
          icon: "el-icon-camera",
        },
        {
          id: "el-icon-video-camera",
          icon: "el-icon-video-camera",
        },
        {
          id: "el-icon-bell",
          icon: "el-icon-bell",
        },
        {
          id: "el-icon-video-play",
          icon: "el-icon-video-play",
        },
        {
          id: "el-icon-view",
          icon: "el-icon-view",
        },
        {
          id: "el-icon-folder-opened",
          icon: "el-icon-folder-opened",
        },
        {
          id: "el-icon-tickets",
          icon: "el-icon-tickets",
        },
        {
          id: "el-icon-reading",
          icon: "el-icon-reading",
        },
        {
          id: "el-icon-data-line",
          icon: "el-icon-data-line",
        },
        {
          id: "el-icon-odometer",
          icon: "el-icon-odometer",
        },
        {
          id: "iconfont shebeiguanli1",
          icon: "iconfont shebeiguanli1",
        },
        {
          id: "iconfont fuwuguanli",
          icon: "iconfont fuwuguanli",
        },
        {
          id: "iconfont rizhi1",
          icon: "iconfont rizhi1",
        },
        {
          id: "iconfont zuhuguanli",
          icon: "iconfont zuhuguanli",
        },
        {
          id: "iconfont fangyirenyuan",
          icon: "iconfont fangyirenyuan",
        },
        {
          id: "iconfont danweiguanli",
          icon: "iconfont danweiguanli",
        },
        {
          id: "iconfont weiwangguanicon-defuben-",
          icon: "iconfont weiwangguanicon-defuben-",
        },
        {
          id: "iconfont ren",
          icon: "iconfont ren",
        },

        {
          id: "iconfont danwei",
          icon: "iconfont danwei",
        },
        {
          id: "iconfont shebei",
          icon: "iconfont shebei",
        },
        {
          id: "iconfont fuwu2",
          icon: "iconfont fuwu2",
        },
        {
          id: "iconfont shouyeshouye",
          icon: "iconfont shouyeshouye",
        },
        {
          id: "iconfont policeman",
          icon: "iconfont policeman",
        },
        {
          id: "iconfont shouye1",
          icon: "iconfont shouye1",
        },
        {
          id: "iconfont he_22zhihuifangyi",
          icon: "iconfont he_22zhihuifangyi",
        },
        {
          id: "iconfont xitong",
          icon: "iconfont xitong",
        },
        {
          id: "iconfont gfjianzhuwu",
          icon: "iconfont gfjianzhuwu",
        },
        {
          id: "iconfont jingcha",
          icon: "iconfont jingcha",
        },
        {
          id: "iconfont gaojing1",
          icon: "iconfont gaojing1",
        },
        {
          id: "iconfont shebei1",
          icon: "iconfont shebei1",
        },
        {
          id: "iconfont rizhi",
          icon: "iconfont rizhi",
        },
        {
          id: "iconfont zuhuguanli1",
          icon: "iconfont zuhuguanli1",
        },
        {
          id: "iconfont icon_unit",
          icon: "iconfont icon_unit",
        },
        {
          id: "iconfont xiaoxi",
          icon: "iconfont xiaoxi",
        },
        {
          id: "iconfont guize",
          icon: "iconfont guize",
        },
        {
          id: "iconfont tongji",
          icon: "iconfont tongji",
        },
        {
          id: "iconfont zuzhijigou",
          icon: "iconfont zuzhijigou",
        },
        {
          id: "iconfont task",
          icon: "iconfont task",
        },
        {
          id: "iconfont dingyue",
          icon: "iconfont dingyue",
        },
        {
          id: "iconfont xiaokongshiguanli1",
          icon: "iconfont xiaokongshiguanli1",
        },
        {
          id: "iconfont loufang",
          icon: "iconfont loufang",
        },
        {
          id: "iconfont icon_unit",
          icon: "iconfont icon_unit",
        },
        {
          id: "",
          icon: "",
        },
      ],
      // 表单修改验证信息
      rules: {
        name: [
          {
            required: true,
            message: "请输入权限名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "请输入权限描述",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "请输入排序",
            trigger: "blur",
          },
        ],
        value: [
          {
            required: true,
            message: "请输入排序",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    editRowInfo(val) {
      this.iconId = val.icon;
      this.parentCheckedId = [val.parentId];
      this.typeId = val.type;
    },
  },
  methods: {
    // 实现tree树的单选
    handleNodeClick(data, checked) {
      if (checked === true) {
        this.parentCheckedId = data.id;
        this.$refs.tree.setCheckedKeys([data.id]);
      } else {
        if (this.parentCheckedId == data.id) {
          this.$refs.tree.setCheckedKeys([data.id]);
        }
      }
    },
    // 获取权限类型id
    changeRadioId(val) {
      this.typeId = val;
    },
    //  确认修改权限
    submitUpdateForm() {
      this.$refs.refUpdateForm.validate(async (valid) => {
        if (!valid)
          return this.$modal.notifyWarning("请检查您的权限名是否输入错误");
        if (this.parentCheckedId[0] === 0 || this.parentCheckedId[0]) {
          //若是没有勾选即是[0]，则取0
          this.parentCheckedId = this.parentCheckedId[0];
        }
        const res = await updatePermission(this.editRowInfo.id, {
          description: this.editRowInfo.description,
          icon: this.iconId,
          name: this.editRowInfo.name,
          parentId: this.parentCheckedId,
          type: this.typeId,
          sort: Number(this.editRowInfo.sort),
          url: this.editRowInfo.url,
          value: this.editRowInfo.value,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("权限修改成功");
        this.dialogVisibleUpdate = false;
        this.$parent.PermissionAll(); //更新权限列表
      });
    },
    // 点击取消和关闭按钮
    cancelUpdateDia() {
      this.$emit("clearEditRowInfo");
      this.$refs.tree.setCheckedKeys([]);
      this.iconId = "";
      this.parentCheckedId = 0;
      this.$refs.refUpdateForm.resetFields();
      this.dialogVisibleUpdate = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");
// 树形
.el-tree {
  background: @primaryTree;
}
// 树形控件字体颜色
::v-deep .el-tree-node__content {
  color: @primaryTree2 !important;
}
// 树形控件选中一行的字体颜色
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  color: #000 !important ;
}
// 节点hover后的背景样式
::v-deep .el-tree-node__content {
  &:hover {
    // background: red !important;
    color: #000 !important;
  }
}
</style>